<template>
  <div class="szmxCell">
    <div v-for="bill in list" :key="bill.months" class="szmxCell-bill">
      <!-- 表头 -->
      <div class="szmxCell-bill-header">
        <div
          class="szmxCell-bill-header-title"
          :style="{ 'margin-bottom': '0' }"
        >
          {{ bill.months }}
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="szmxCell-list items-center"
        v-for="(item, index) in bill.list"
        :key="item.id"
      >
        <div class="szmxCell-list-left">
          <img
            v-if="item.datatype && item.datatype == 'wkmx'"
            class="szmxCell-list-img"
            :src="imgType(item.taskType)"
          />
          <div v-else class="szmxCell-list-img">
            <img v-if="item.isAdd" src="/image/mining/income-icon.svg" />
            <img v-else src="/image/mining/expenses-icon.svg" />
          </div>
          <div style="flex: 1">
            <div class="szmxCell-list-title">{{ item.tradeTypeShow }}</div>
            <div class="szmxCell-list-time">{{ item.value }}</div>
          </div>
        </div>
        <div
          class="szmxCell-list-add"
          :class="{ 'szmxCell-list-reduce': !item.isAdd }"
        >
          {{ !item.isAdd ? "" : "+" }}{{ item.changeAmount }} BDC
        </div>
        <div class="szmxCell-list-bottomline"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="szmxCell">
// import { toThousands, decimalToLength } from "@/utils";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
    type: number;
  }>(),
  {
    list: [],
    type: 0,
  }
);

const file = getOssFileUrl({
  wkmx: "/image/mining/",
});

/**
 * @description: 2:实名认证 17:手机号绑定 31:首次充值5U 26:社区任务-发帖 27:社区任务-点赞 28:社区任务-评论 29:每日交易 18:每日签到 30:每日活跃
 * @param {*} type 类型
 * @return {*}
 */
const imgType = (type: number) => {
  if (type == 17) {
    return file.wkmx + "wkmx-icon0.svg";
  } else if (type == 31) {
    return file.wkmx + "wkmx-icon1.svg";
  } else if (type == 30) {
    return file.wkmx + "wkmx-icon2.svg";
  } else if (type == 18) {
    return file.wkmx + "wkmx-icon3.svg";
  } else if (type == 27) {
    return file.wkmx + "wkmx-icon4.svg";
  } else if (type == 26) {
    return file.wkmx + "wkmx-icon5.svg";
  } else if (type == 28) {
    return file.wkmx + "wkmx-icon6.svg";
  } else if (type == 2) {
    return file.wkmx + "wkmx-icon7.svg";
  } else if (type == 29) {
    return file.wkmx + "wkmx-icon8.svg";
  }
};
</script>
<style scoped lang="scss">
.szmxCell {
  &-bill {
    margin-bottom: 10 * 2px;
    border-radius: 12 * 2px;
    overflow: hidden;
    padding-bottom: 16 * 2px;
    background-color: #fff;
    &-header {
      background-color: #fff;
      padding-bottom: 14 * 2px;
      &-title {
        display: inline-block;
        font-size: 15 * 2px;
        font-weight: 590;
        color: #007bff;
        padding: 5 * 2px 15 * 2px;
        border-bottom-right-radius: 12 * 2px;
        background-color: #ecf5ff;
      }
      &-text {
        font-size: 13 * 2px;
        color: #141924;
        padding-right: 10 * 2px;
      }
    }
  }
  &-list {
    position: relative;
    padding: 22px 30px;
    justify-content: space-between;
    background-color: #fff;
    &-left {
      display: flex;
      flex: 1;
      margin-right: 8 * 2px;
    }
    &-img {
      width: 36 * 2px;
      height: 36 * 2px;
      margin-right: 10 * 2px;
    }
    &-bottomline {
      position: absolute;
      bottom: 0;
      left: 30px;
      background-color: #f5f5f5;
      height: 1px;
      width: calc(100% - 30 * 2px);
    }
    &-add {
      align-self: end;
      color: #007bff;
      font-size: 14 * 2px;
      font-weight: 510;
    }
    &-reduce {
      align-self: end;
      color: #ff4040;
      font-size: 14 * 2px;
      font-weight: 510;
    }

    &-title {
      color: #141924;
      font-size: 14 * 2px;
      font-weight: 510;
      margin-bottom: 8 * 2px;
    }
    &-time {
      font-size: 13 * 2px;

      color: #999da7;
    }
  }
}
</style>
